<template>
  <form @submit="login" class="navv">
    登入界面<br />
    <div>
      <label>用户名：</label>
      <input
        class="uname"
        type="username"
        v-model="username"
        placeholder="请输入用户名"
        required
      /><br />
      <label>密码：</label>
      <input
        class="passw"
        type="password"
        v
        v-model="password"
        placeholder="请输入密码"
        required
      />
    </div>
    <button type="submit" class="loginpage">登入</button>
  </form>
</template>

<script setup>
import { ref } from "vue";
import { useUser } from "@/stores/user";
import { useRouter } from "vue-router";

const username = ref("22001449");
const password = ref("123456");

const userStore = useUser();
const router = useRouter();

const login = async () => {
  try {
    await userStore.login(username.value, password.value);
    router.push("/my");
  } catch (error) {
    alert("账号密码错误，请重新登入");
  }
};
</script>

<style>
.navv {
  text-align: center;
  align-items: center;
  position: absolute;
  top: 120px;
  left: 50px;
}
label {
  float: left;
}
input {
  float: right;
}
.loginpage {
  margin-top: 10px;
  margin-left: 20px;
}
</style>
@/stores/user
